<template>
  <el-popover :width="296" placement="bottom-end" trigger="hover">
    <template #reference>
      <li class="sea-menu-item pull-right" style="">
        <img alt="header" class="img-circle" src="/img/head_01.png"
             style="background-color: lightgray;width: 36px;"/>
      </li>
    </template>
    <div>
      <div class="bg-primary padding margin-bottom" style="text-align: center">
        <img src="/img/head_02.png" class="img-circle" alt="header" style="background-color: lightgray"/>
          <div> {{ userInfo.username }} </div>
          <div> {{ userInfo.motto }}</div>
      </div>
      <div class="margin-bottom">
        <el-row>
          <el-col :span="8" class="text-block align-center">
            <a type="text">任务</a>
          </el-col>
          <el-col :span="8" class="text-block align-center">
            <a type="text">消息</a>
          </el-col>
          <el-col :span="8" class="text-block align-center">
            <a type="text">预留</a>
          </el-col>
        </el-row>
      </div>
      <div>
          <el-button plain class="pull-left">修改密码</el-button>
          <el-button plain class="pull-right" @click="logout">登出</el-button>
      </div>
    </div>
  </el-popover>
</template>

<script setup>
import {ref} from "vue";
import router from "@/router/index";
import application from "@/starter/application-context";

const userInfo = ref({});

// TODO: 登录
// 使用测试账号进行登录，正常逻辑：在前一个界面就要完成用户授权
application.login("admin",  "test").then(user => {
    userInfo.value = user;
});

/**
 * 登出系统
 *
 * 注意不要在这里写过多逻辑，统一写道 application 配置文件中
 */
const logout = () => {
    application.logout();
    router.push({path: '/login'});
}
</script>

<style scoped>
</style>